<template>
  <el-card>
  <el-upload
    style="width:500px;"
    v-model:file-list="fileList"
    action="#"
    :data="intoData"
    :http-request="loadFile"
    :on-error="handleOnError"
    :on-success="handleOnSuccess"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
  >
    <template #trigger>
      <el-button type="primary">上传文件</el-button>
    </template>
  </el-upload>

  <el-dialog title="预览" center :close-on-click-modal="false"
    :destroy-on-close="true" top="4%" width="70%" v-model="dialogVisible">
    <div class="flex justify-center">
      <template v-if="dialogFileType=='img'">
          <img style="width:600px;" w-full :src="dialogFileUrl" alt="Preview Image" />
      </template>
      <template v-if="dialogFileType=='video'">
          <video  class="video" :src="dialogFileUrl" controls controlslist="nodownload" x5-playsinline playsinline webkit-playsinline preload="auto"></video>
      </template>
    </div>
  </el-dialog>
  </el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {loadFile,getFileDelete} from "@/utils/upload"
import { ElMessage } from 'element-plus';
import { fileListFace } from "./types/index";
const intoData: { category: string,userId:number } = {  category: '用户>头像',userId:0 };

// 文件列表

// const fileList: Array<any> = [];
const fileList = ref<fileListFace>();
// 正确返回文件路径及其所有值
const handleOnSuccess=(option:any)=>{
  console.info('option',option);
}

// 错误信息
const handleOnError=(option:any)=>{
  console.info('option',option);
  ElMessage.error('该文件格式不允许上传！')
}
// 删除文件
const handleRemove = (uploadFile:any, uploadFiles:any) => {
  console.log(uploadFile, uploadFiles);
  getFileDelete(uploadFile.response.md5);
}

// 预览图片
const dialogFileUrl = ref('')
const dialogFileType = ref('')
const dialogVisible = ref(false)
const handlePictureCardPreview = (uploadFile:any) => {
  console.info(uploadFile);
  if(uploadFile.response.fileType=='img'||uploadFile.response.fileType=='video'){
    dialogFileUrl.value = uploadFile.response.source;
    dialogFileType.value = uploadFile.response.fileType;
    dialogVisible.value = true;
  }else{
    ElMessage.warning('该文件格式不允许预览！')
  }
}
</script>
<style>

</style>